<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="../lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .icon-cray {color:#ffb800!important;}
        .icon-blue {color:#1e9fff!important;}
        .icon-tip {color:#ff5722!important;}
        .layuimini-qiuck-module {text-align:center;margin-top: 10px}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .welcome-module {width:100%;height:210px;}
        .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .layui-bg-number {background-color:#F8F8F8;}
        .layuimini-notice:hover {background:#f6f6f6;}
        .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
        .layuimini-notice-title,.layuimini-notice-label {
            padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
        .layuimini-notice-title {line-height:28px;font-size:14px;}
        .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <!--面板-->
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                                        <h5>使用中设备总数</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="countByUsing"></h1>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">实时</span>
                                                        <h5>待使用设备总数</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="countByResting"></h1>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>维修中设备总数</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="countByRepairing"></h1>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>快捷入口</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10 layuimini-qiuck">
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="update-miner.html" data-title="修改指定员工" data-icon="fa fa-user">
                                                <i class="fa fa-user"></i>
                                                <cite>修改指定员工</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="displayRecords.html" data-title="显示所有气体" data-icon="fa fa-user-secret">
                                                <i class="fa fa-user-secret"></i>
                                                <cite>显示所有气体</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="countRecords.html" data-title="实时气体浓度" data-icon="fa fa-gears">
                                                <i class="fa fa-gears"></i>
                                                <cite>实时气体浓度</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="devices-manage.html" data-title="查询设备信息" data-icon="fa fa-dot-circle-o">
                                                <i class="fa fa-dot-circle-o"></i>
                                                <cite>查询设备信息</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="countByDevices.html" data-title="设备状态统计表" data-icon="fa fa-calendar">
                                                <i class="fa fa-calendar"></i>
                                                <cite>设备状态统计表</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="add-repair.html" data-title="添加维修记录" data-icon="fa fa-hourglass-end">
                                                <i class="fa fa-hourglass-end"></i>
                                                <cite>添加维修记录</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="password.html" data-title="修改密码" data-icon="fa fa-snowflake-o">
                                                <i class="fa fa-snowflake-o"></i>
                                                <cite>修改密码</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="countGas.html"  data-title="瓦斯浓度监测" data-icon="fa fa-search">
                                                <i class="fa fa-search"></i>
                                                <cite>瓦斯浓度监测</cite>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>气体浓度统计</div>
                            <div class="layui-card-body">
                                <div id="echartsRecords" style="width: 100%;min-height:500px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
                    <div class="layui-card-body layui-text">
                        <div class="layuimini-notice" id="layuimini-notice1">
                            <div class="layuimini-notice-title">全国矿山事故情况及3月份安全风险提示</div>
                            <div class="layuimini-notice-extra">2022-03-05 09:06</div>
                            <div class="layuimini-notice-content layui-hide">
                                1-2月全国矿山事故情况及3月份安全风险提示
                                (调查统计司2022年3月5日）
                                1-2月矿山事故情况
                                一)事故总体情况
                                1-2月，全国矿山共发生事故25起、 死亡40人，同比成小22起、31人，分别下降46.8%和43.7%。其中，重大事故1起
                                4人，同比事故起数持平，人数增加3人，上升27.3% ;未发生较大事故，同比减少3起15人。<br>
                                25起事故共涉及15个省(区)。李故总量从多到少排名依次是，贵州2起、15人，云南3起、4人，甘来3起、3人，湖北2
                                起、3人;河南、内蒙古、安徽、广西各2起2人山西、辽宁、山东、四川、陕西、宁夏、新疆各1起、1人。
                            </div>
                        </div>
                        <div class="layuimini-notice" id="layuimini-notice2">
                            <div class="layuimini-notice-title">集控工安全技术操作规程</div>
                            <div class="layuimini-notice-extra">2022-01-26 14:28</div>
                            <div class="layuimini-notice-content layui-hide">
                                1.具备组织和指挥生产的能力，熟悉生产管理，持有效证件上岗。<br>
                                2.熟悉选煤工艺流程、机械设备闭锁关系，各机电设备名称、 性能、构造、技术特征。<br>
                                3.对本岗位设备做到会操作、会维护、会保养、会排除一般故障。<br>
                                4.根据要求，对关键设备的设定信进行检查调整，同时检查操作室各项记录，发现问题及时汇报值班干部及班长。<br>
                                5.与各岗位密切配合，对各项指令都要迅速做出反应。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice" id="layuimini-notice3">
                            <div class="layuimini-notice-title">应急管理部关于修改《煤矿安全规程》的决定</div>
                            <div class="layuimini-notice-extra">2019-01-14 11:02</div>
                            <div class="layuimini-notice-content layui-hide">
                                为进一步预防和遏制煤矿 生产安全事故，提升煤矿本质安全水平，应急管理部决定对 《煤矿安全规程》（国家安全生产监督管理总局令第87号）部分条款予以修改：<br>
                                一、将第四条修改为：“从事煤炭生产与煤矿建设的企业 （以下统称煤矿企业）必须遵守国家有关安全生产的法律、法规、 规章、规程、标准和技术规范。<br>
                                "煤矿企业必须加强安全生产管理，建立健全各级负责人、各部门、各岗位安全生产与职业病危書防治责任制。<br>
                                “煤矿企业必须建立健全安全生产与职业病危害防治目标管理、投入、奖惩、技术措施审批、培训、办公会议制度，安全检查制度，安全风险分级管控工作制度，事故隐患排查、治理、报告制度，事故报告与责任追究制度等。
                            </div>
                        </div>
                        <div class="layuimini-notice" id="layuimini-notice4">
                            <div class="layuimini-notice-title">连续运煤系统安全技术操作规程</div>
                            <div class="layuimini-notice-extra">2021-11-10 12:57</div>
                            <div class="layuimini-notice-content layui-hide">
                                一个接口几行代码而已直接初始化整个框架，无需复杂操作。<br>
                                支持多tab，可以打开多窗口。<br>
                                支持无限级菜单和对font-awesome图标库的完美支持。<br>
                                失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。<br>
                                url地址hash定位，可以清楚看到当前tab的地址信息。<br>
                                刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。<br>
                                移动端的友好支持。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice" id="layuimini-notice5">
                            <div class="layuimini-notice-title">矿井硐室管理规定</div>
                            <div class="layuimini-notice-extra">2021-11-08 11:55</div>
                            <div class="layuimini-notice-content layui-hide">
                                第一章 总则<br>
                                为进一步规范矿 井碉室管理工作，防范采掘工作面过铜室存在的安全风险，根据 （煤矿安全规程》《煤矿測量规桯》《煤矿地质工作规定》《煤矿防治水细则》，特制定本规定。
                                第二章 管理职责<br>
                                (一）通防地质部监管各煤矿公司井下洞室技术资料管理工作,每季度开展一次矿井硐室管理检查<br>
                                (二）生产技术部监管各煤矿公司矿井洞室设计、施工及验收管理工作。<br>
                                (三）安全监察部监管各煤矿公司矿 井硐室管理制度执行。<br>
                            </div>
                        </div>
                        <div class="layuimini-notice" id="layuimini-notice6">
                            <div class="layuimini-notice-title">《煤矿重大事故隐患判定标准》解读</div>
                            <div class="layuimini-notice-extra">2021-06-25 23:06</div>
                            <div class="layuimini-notice-content layui-hide">
                                为准确判定、及时消除煤矿重大事故隐患，根据《安全生产法》和《国务院关
                                于预方煤矿生产安全事故的特别规定》（国务院令第446号）等法律、行政法规，结
                                合近年来煤矿典型事故教训，应急管理部制定印发了《煤矿重大事故隐患判定标
                                准》<br>
                                从15个方面列举了81种应当
                                判定为重大事故隐患的情形。为进一步明确 《判定标准》 有关情形的内涵及依据，
                                便于各级煤矿安全监管监察部门和煤矿企业应用，规范《判定标准》 有效执行，现
                                对《判定标准》 中重点条款含义进行解释说明：
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-pencil-square-o icon"></i>工作日志</div>
                        <div class="layui-card-body" >
                          <div  id="zyupload" style="width: 100%;min-height:450px"></div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
<script>
    layui.use(['layer', 'miniTab','echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts;

        miniTab.listen();

        /**
         * 统计在使用设备总数
         **/
        $.ajax({
            url:"/devices/listOn",
            type:"GET",
            dataType:"JSON",
            success: function(countByUsing){
                console.log(countByUsing)
                $("#countByUsing").append(countByUsing.count)
            }
        })

        /**
         * 统计待使用设备总数
         **/
        $.ajax({
            url:"/devices/listOff",
            type:"GET",
            dataType:"JSON",
            success: function(countByResting){
                console.log(countByResting)
                $("#countByResting").append(countByResting.count)
            }
        })

        /**
         * 统计维修中设备总数
         **/
        $.ajax({
            url:"/devices/listRepair",
            type:"GET",
            dataType:"JSON",
            success: function(countByRepairing){
                console.log(countByRepairing)
                $("#countByRepairing").append(countByRepairing.count)
            }
        })

        /**
         * 查看公告信息
         **/
        $('body').on('click', '.layuimini-notice', function () {
            var title = $(this).children('.layuimini-notice-title').text(),
                noticeTime = $(this).children('.layuimini-notice-extra').text(),
                content = $(this).children('.layuimini-notice-content').html();
            var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
                '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
                '<div style="font-size: 12px">' + content + '</div>\n' +
                '</div>\n';
            parent.layer.open({
                type: 1,
                title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
                area: '300px;',
                shade: 0.8,
                id: 'layuimini-notice1',
                btn: ['查看', '取消'],
                btnAlign: 'c',
                moveType: 1,
                content: html,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'http://www.mkaq.org/html/2022/03/06/618714.shtml',
                        target: '_blank'
                    });
                },
            });
            return false;
            parent.layer.open({
                type: 1,
                title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
                area: '300px;',
                shade: 0.8,
                id: 'layuimini-notice2',
                btn: ['查看', '取消'],
                btnAlign: 'c',
                moveType: 1,
                content: html,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'http://www.mkaq.org/html/2022/01/26/610651.shtml',
                        target: '_blank'
                    });
                }
            });
            parent.layer.open({
                type: 1,
                title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
                area: '300px;',
                shade: 0.8,
                id: 'layuimini-notice3',
                btn: ['查看', '取消'],
                btnAlign: 'c',
                moveType: 1,
                content: html,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'http://www.mkaq.org/html/2022/01/14/606197.shtml',
                        target: '_blank'
                    });
                }
            });
            parent.layer.open({
                type: 1,
                title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
                area: '300px;',
                shade: 0.8,
                id: 'layuimini-notice4',
                btn: ['查看', '取消'],
                btnAlign: 'c',
                moveType: 1,
                content: html,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'http://www.mkaq.org/html/2021/11/10/594095.shtml',
                        target: '_blank'
                    });
                }
            });
            parent.layer.open({
                type: 1,
                title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
                area: '300px;',
                shade: 0.8,
                id: 'layuimini-notice5',
                btn: ['查看', '取消'],
                btnAlign: 'c',
                moveType: 1,
                content: html,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'http://www.mkaq.org/html/2021/11/08/593746.shtml',
                        target: '_blank'
                    });
                }
            });
            parent.layer.open({
                type: 1,
                title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
                area: '300px;',
                shade: 0.8,
                id: 'layuimini-notice6',
                btn: ['查看', '取消'],
                btnAlign: 'c',
                moveType: 1,
                content: html,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'http://www.mkaq.org/html/2021/06/25/570587.shtml',
                        target: '_blank'
                    });
                }
            });
        });
        /**
         * 报表功能
         */

        var echartsRecords = echarts.init(document.getElementById('echartsRecords'), 'walden');

        var optionRecords = {
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                restore: {},
                feature: {
                    saveAsImage: {
                        show: true
                    }
                }
            },
            legend: {
                data: ['一氧化碳', '硫化氢', '二氧化氮', '二氧化硫', '氨气', '氢气']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'  //数值轴
            },
            series: [  //对象
                {
                    name: '一氧化碳',
                    type: 'line',
                    data: []
                },
                {
                    name: '硫化氢',
                    type: 'line',
                    data: []
                },
                {
                    name: '二氧化氮',
                    type: 'line',
                    data: []
                },
                {
                    name: '二氧化硫',
                    type: 'line',
                    data: []
                },
                {
                    name: '氨气',
                    type: 'line',
                    data: []
                }
            ]
        };

        fetch("/echarts/line").then(response => response.json()).then(res => {
            //折线图
            console.log(res);

            const updateTime = res.data.map(v => v.updateTime);
            console.log(updateTime);
            optionRecords.xAxis.data = updateTime

            const co = res.data.map(v => v.co);
            optionRecords.series[0].data = co;
            const h2S = res.data.map(v => v.h2S);
            optionRecords.series[1].data = h2S;
            const no2 = res.data.map(v => v.no2);
            optionRecords.series[2].data = no2;
            const so2 = res.data.map(v => v.so2);
            optionRecords.series[3].data = so2;
            const nh3 = res.data.map(v => v.nh3);
            optionRecords.series[4].data = nh3;

            echartsRecords.setOption(optionRecords);

            if (res.danger == 1) {

                layer.alert('安全警报！有害气体浓度过高！', {
                    time: 5 * 1000
                    , success: function (layero, index) {
                        var timeNum = this.time / 1000, setText = function (start) {
                            layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
                        };
                        setText(!0);
                        this.timer = setInterval(setText, 1000);
                        if (timeNum <= 0) clearInterval(this.timer);
                    }
                    , end: function () {
                        clearInterval(this.timer);
                    }
                });

                var audio = document.getElementById("auto");
                audio.play();
            }

        })

        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });

    $(function () {
        // 初始化插件
        $("#zyupload").zyUpload({
            width: "500px",                 // 宽度
            height: "600px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "/file/up",  // 上传文件的路径
            fileType: ["jpg", "png", "txt", "js", "exe","doc","docx"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: true,                    // 是否可以多个文件上传
            dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                console.info("当前选择了以下文件：");
                console.info(selectFiles);
            },
            onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                console.info("当前删除了此文件：");
                console.info(file.name);
            },
            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                console.info("此文件上传成功：");
                console.info(file.name);
                console.info("此文件上传到服务器地址：");
                console.info(response);
                $("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
            },
            onFailure: function (file, response) {          // 文件上传失败的回调方法
                console.info("此文件上传失败：");
                console.info(file.name);
            },
            onComplete: function (response) {           	  // 上传完成的回调方法
                console.info("文件上传完成");
                console.info(response);
            }
        });

    });




</script>
</body>
</html>
